<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>方向资源管理</title>
	<meta name="decorator" content="default"/>
	<script type="text/javascript">
		$(document).ready(function() {
			
		});
		function page(n,s){
			$("#pageNo").val(n);
			$("#pageSize").val(s);
			$("#searchForm").submit();
        	return false;
        }

        function preview(sourceType, sourceId) {
            top.$.jBox.open("iframe:${ctx}/templet/eleTemplet/preview?sourceType="+sourceType+"&sourceId=" + sourceId, "<spring:message code='preview'/>", 500, 420, {showScrolling: false});
        }
        var media = null;
      	//播放暂停切换  
        function playUpAudio(id) {
        	media = $('#upAudio_'+id)[0]; 
        	var playerId = "upPlayer_"+id;
            if(media.paused) {  
            	console.log("1");
                play(playerId);  
            } else {  
            	console.log("2");

                pause(playerId);  
            }  
        }  
        function playDownAudio(id) {
        	media = $('#downAudio_'+id)[0]; 
        	var playerId = "downPlayer_"+id;
            if(media.paused) {  
            	console.log("1");
                play(playerId);  
            } else {  
            	console.log("2");

                pause(playerId);  
            }  
        }  
        function playDefAudio(id) {
        	media = $('#defAudio_'+id)[0]; 
        	var playerId = "defPlayer_"+id;
            if(media.paused) {  
            	console.log("1");
                play(playerId);  
            } else {  
            	console.log("2");

                pause(playerId);  
            }  
        }  
        //播放  
        function play(id) {  
            media.play();  
            $('#'+id).html('<i class="icon-pause"></i>');
            media.addEventListener('ended', function () {
                $('#'+id).html('<i class="icon-play"></i>');
            }, false);
        }  
          
        //暂停  
        function pause(id) {  
            media.pause();  
            $('#'+id).html('<i class="icon-play"></i>');
        }  
	</script>
</head>
<body>
	<ul class="nav nav-tabs">
		<li class="active">
			<a href="${ctx}/source/direction/eleSourceDirectionGroup/">
				<spring:message code="direction.list"/>
			</a>
		</li>
		<shiro:hasPermission name="source:direction:eleSourceDirectionGroup:edit">
			<li>
				<a href="${ctx}/source/direction/eleSourceDirectionGroup/form">
					<spring:message code="direction.add"/>
				</a>
			</li>
		</shiro:hasPermission>
	</ul>
	<form:form id="searchForm" modelAttribute="eleSourceDirectionGroup" action="${ctx}/source/direction/eleSourceDirectionGroup/" method="post" class="breadcrumb form-search">
		<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
		<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
		<ul class="ul-form">
			<li><label><spring:message code="common.dname"/>：</label>
				<form:input path="name" htmlEscape="false" maxlength="255" class="input-medium"/>
			</li>
			<li class="btns"><input id="btnSubmit" class="btn btn-primary" type="submit" value="<spring:message code='common.Query'/>"/></li>
			<li class="clearfix"></li>
		</ul>
	</form:form>
	<sys:message content="${message}"/>
	<table id="contentTable" class="table table-striped table-bordered table-condensed" >
		<thead>
			<tr>
				<th><spring:message code="common.dname"/></th>
				<th><spring:message code="direction.static.image"/></th>
				<th><spring:message code="direction.upside.image"/></th>
				<th><spring:message code="direction.upside.tone"/></th>
				<th><spring:message code="direction.down.image"/></th>
				<th><spring:message code="direction.down.tone"/></th>
				<th><spring:message code="direction.doublestop.image"/></th>
				<th><spring:message code='common.update_time'/></th>
				<th><spring:message code='common.creater'/></th>				

				<th><spring:message code='common.operation'/></th>
				<th><spring:message code='common.remarks'/></th>
			</tr>
		</thead>
		<tbody>
		<c:forEach items="${page.list}" var="eleSourceDirectionGroup">
			<tr>
				<td>
					<a href="${ctx}/source/direction/eleSourceDirectionGroup/form?id=${eleSourceDirectionGroup.id}">
						${eleSourceDirectionGroup.name}
					</a>
				</td>
				<td style="background-color:#B5b5b5">
					<img src="${eleSourceDirectionGroup.stop}" style="height:40px;" />
				</td>
				<td style="background-color:#B5b5b5">
					<img src="${eleSourceDirectionGroup.upstop}" style="height:40px;" />
				</td>
				<td >
					
					<audio id="upAudio_${eleSourceDirectionGroup.id}" src="${eleSourceDirectionGroup.uptips}" hidden="true"></audio>
					<c:if test="${not empty eleSourceDirectionGroup.uptips}">
						<a href="javascript:void(0);" onclick="playUpAudio('${eleSourceDirectionGroup.id}');" id="upPlayer_${eleSourceDirectionGroup.id}"><i class="icon-play"></i></a>
					</c:if>
				</td>
				<td style="background-color:#B5b5b5">
					<img src="${eleSourceDirectionGroup.downstop}" style="height:40px;"/>
				</td>
				<td >
					
					<audio id="downAudio_${eleSourceDirectionGroup.id}" src="${eleSourceDirectionGroup.downtips}"  hidden="true"></audio>
					<c:if test="${not empty eleSourceDirectionGroup.downtips}">
						<a href="javascript:void(0);" onclick="playDownAudio('${eleSourceDirectionGroup.id}');" id="downPlayer_${eleSourceDirectionGroup.id}"><i class="icon-play"></i></a>
					</c:if>
				</td>
				<td style="background-color:#B5b5b5">
					<img src="${eleSourceDirectionGroup.doublestop}" style="height:40px;"/>
				</td>
				<td>
					<fmt:formatDate value="${eleSourceDirectionGroup.updateDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
				</td>
				<td>
					${eleSourceDirectionGroup.createBy.name}
				</td>

				<td>
					<shiro:hasPermission name="source:direction:eleSourceDirectionGroup:edit">
					<a href="${ctx}/source/direction/eleSourceDirectionGroup/form?id=${eleSourceDirectionGroup.id}"><spring:message code="common.modify"/></a>
					<a href="${ctx}/source/direction/eleSourceDirectionGroup/delete?id=${eleSourceDirectionGroup.id}" onclick="return confirmx('<spring:message code="tips.deldirectional"/>', this.href)"><spring:message code='common.delete'/></a>
					<shiro:hasPermission name="source:direction:eleSourceDirectionGroup:check">
						<a href="${ctx}/source/direction/eleSourceDirectionGroup/check?id=${eleSourceDirectionGroup.id}">审核</a>
					</shiro:hasPermission>
					</shiro:hasPermission>
					<a href="javascript:void(0);" onclick="preview('direction','${eleSourceDirectionGroup.id}')">
						<spring:message code="preview"/>
					</a>
				</td>
				<td>
						${eleSourceDirectionGroup.remarks}
				</td>
			</tr>
		</c:forEach>
		</tbody>
	</table>
	<div class="pagination">${page}</div>
</body>
</html>